<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>样式遮盖-懒加载动画</title>
</head>

<body>


  代码来源： IntersectionObserver实现图片懒加载（滚动动画）
  https://juejin.cn/post/6844903930183303181
  <div class="imgWarp">
    <img alt="加载" class="lazyload" src="" data-origin="https://sofile.cn/wp-content/uploads/img_test/1.jpg" />
    <img alt="加载" class="lazyload" src="" data-origin="https://sofile.cn/wp-content/uploads/img_test/2.jpg" />
    <img alt="加载" class="lazyload" src="" data-origin="https://sofile.cn/wp-content/uploads/img_test/3.jpg" />
  </div>

  <script>
    //js
    function Observer() {
      let images = document.querySelectorAll(".lazyload");
      let observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((item) => {
            if (item.isIntersecting) {
              item.target.src = item.target.dataset.origin; // 开始加载图片,把data-origin的值放到src
              observer.unobserve(item.target); // 停止监听已开始加载的图片
            }
          });
        },
        {
          rootMargin: "0px 0px -100px 0px", // 交叉过视图的100，才开始派发事件
        }
      );
      images.forEach((item) => observer.observe(item));
    }

    Observer();
  </script>
  <style>
    .imgWarp {
      display: flex;
      flex-direction: column;
      margin-top: 1000px;
    }

    .imgWarp .lazyload {
      margin-top: 30px;
      display: inline-block;
      width: 120px;
      height: 120px;
      position: relative;
    }

    /*图片会将此样式遮盖，以达遮盖动画效果*/
    .imgWarp .lazyload:after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      background-color: #ccc;
    }
  </style>
</body>

</html>